<!-- 引入 ECharts 文件 -->
<style>
    body {
        margin: 0;
        padding: 16px;
        background-color: #F4F4F4;
    }

    .el-row {
        position: relative;
        box-sizing: border-box;
    }

    .el-col-14 {
        width: 58.33333%;
    }

    .el-col-10 {
        width: 41.66667%;
    }

    [class*=el-col-] {
        float: left;
        box-sizing: border-box;
    }

    .title-card {
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .title-card-header {
        padding: 14px 20px;
        border-bottom: 1px solid #ddd;
    }

    .title-card-title {
        font-size: 18px;
    }

    .title-card-body {
        padding: 24px 32px;
    }

    .title-card .alarm-count2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        line-height: 24px;
        font-size: 16px;
    }

    .title-card .alarm-count2-item {
        width: 33%;
        padding: 10px;
    }

    .title-card .pie-item {
        height: 260px;
    }

    #lineChart-1 {
        height: 280px;
        width: 100%;
    }

    .el-box {
        visibility: visible;
        height: 400px;
    }

    #histroyDataChart {
        width: 100%;
        height: 400px;
    }
</style>
<div class="el-box el-row" style="margin-left: -10px; margin-right: -10px;">
    <div class="el-col el-col-14" style="padding-left: 10px; padding-right: 10px;">
        <div class="title-card">
            <div class="title-card-header"><span class="title-card-title">关键数据</span></div>
            <div class="title-card-body">
                <div class="alarm-count2">
                    <div class="alarm-count2-item ">
                        <div id="pieChart-1" class="pie-item"></div>
                    </div>
                    <div class="alarm-count2-item">
                        <div id="pieChart-2" class="pie-item"></div>
                    </div>
                    <div class="alarm-count2-item">
                        <div id="pieChart-3" class="pie-item"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="el-col el-col-10" style="padding-left: 10px; padding-right: 10px;">
        <div class="title-card">
            <div class="title-card-header"><span class="title-card-title">当日趋势图</span></div>
            <div class="title-card-body">
                <div id="lineChart-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="el-box">
    <div class="title-card">
        <div class="title-card-body">
            <div id="histroyDataChart"></div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="__STATIC__/js/echarts.min.js"></script>-->
<script type="text/javascript">
    var isHasInit = false;
    var timerIndex = setInterval(function () {
        if (isHasInit) {
            clearTimeout(timerIndex);
        } else {
            init();
        }
    }, 1000);
    init();

    function init() {
        if (!(echarts && typeof echarts === 'object' && typeof echarts.init === 'function')) {
            return false;
        }
        isHasInit = true;
        // 基于准备好的dom，初始化echarts实例
        var myChart_1 = echarts.init(document.getElementById('pieChart-1')),
            myChart_2 = echarts.init(document.getElementById('pieChart-2')),
            myChart_3 = echarts.init(document.getElementById('pieChart-3')),
            myChart_4 = echarts.init(document.getElementById('lineChart-1')),
            myChart_5 = echarts.init(document.getElementById('histroyDataChart'));
        var devicesData = [
            {value: 0, name: '烟感'},
            {value: 0, name: '温感'},
            {value: 0, name: '气感'}
        ];
        var alarmData = [
            {value: 0, name: '烟感'},
            {value: 0, name: '温感'},
            {value: 0, name: '气感'}
        ];
        var handleData = [
            {value: 0, name: '日常生活'},
            {value: 0, name: '演示测试'},
            {value: 0, name: '真实火情'}
        ];
        var devices = '<{:json_encode($devices)}>',
            alarm = '<{:json_encode($alarm)}>',
            handle = '<{:json_encode($handle)}>',
            timeData = '<{:json_encode($timeData)}>',
            dateData = '<{:json_encode($dateData)}>';
        try {
            devices = JSON.parse(devices);
            if (devices && devices.length > 0) {
                devicesData = devices;
            }
        } catch (e) {
        }
        try {
            alarm = JSON.parse(alarm);
            if (alarm && alarm.length > 0) {
                alarmData = alarm;
            }
        } catch (e) {
        }
        try {
            handle = JSON.parse(handle);
            if (handle && handle.length > 0) {
                handleData = handle;
            }
        } catch (e) {
        }

        // 指定图表的配置项和数据
        var option_1 = {
            title: {
                text: '设备总数',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: 'bottom',
                data: ['烟感', '温感', '气感']
            },
            series: [
                {
                    name: '设备总数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: devicesData,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option_2 = {
            title: {
                text: '报警设备',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: 'bottom',
                data: ['烟感', '温感', '气感']
            },
            series: [
                {
                    name: '设备总数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: alarmData,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option_3 = {
            title: {
                text: '已处理报警',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: 'bottom',
                data: ['日常', '演示', '真实','其他']
            },
            series: [
                {
                    name: '设备总数',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: handleData,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var mark = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#3398DB;"></span>';
        var timeLabelList = [], timeValueList = [];
        try {
            timeData = JSON.parse(timeData);
            if (timeData && timeData.length > 0) {
                timeLabelList = timeData.map(function (item) {
                    return item[0];
                });
                timeValueList = timeData.map(function (item) {
                    return item[1];
                });
            }
        } catch (e) {
            for (var i = 0; i <= 24; i++) {
                timeLabelList.push(i);
                timeValueList.push(0);
            }
        }
        var option_4 = {
            title: {
                text: '实时数据图',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return '时刻:' + params.name + '<br/>' + mark + params.seriesName + ':' + params.value;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                bottom: 'bottom',
                data: ['报警记录']
            },
            grid: {
                right: 40,
                bottom: 40,
                top: 50,
                containLabel: true
            },
            xAxis: [
                {
                    name: '时刻',
                    type: 'category',
                    boundaryGap: false,
                    interval: 1,
                    data: timeLabelList
                }
            ],
            yAxis: [
                {
                    name: '报警记录',
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '报警记录',
                    type: 'line',
                    smooth: true,
                    color: '#649ad1',
                    data: timeValueList
                }
            ]
        };
        var dateLabelList = [], dateValueList = [];
        try {
            dateData = JSON.parse(dateData);
            if (dateData && dateData.length > 0) {
                dateLabelList = dateData.map(function (item) {
                    return item[0];
                });
                dateValueList = dateData.map(function (item) {
                    return item[1];
                });
            }
        } catch (e) {
            var time = new Date().getTime();
            for (var k = 0; k <= 7; k++) {
                dateLabelList.push(time - 86400 * k * 1000);
                dateValueList.push(0);
            }
        }
        var option_5 = {
            title: {
                text: '近七天历史趁势图',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return params.name + '<br/>' + mark + params.seriesName + ':' + params.value;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                bottom: 'bottom',
                data: ['报警记录']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: 40,
                top: 50,
                containLabel: true
            },
            xAxis: [
                {
                    name: '日期',
                    type: 'category',
                    boundaryGap: false,
                    data: dateLabelList
                }
            ],
            yAxis: [
                {
                    name: '报警记录',
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '报警记录',
                    type: 'line',
                    smooth: true,
                    color: '#649ad1',
                    data: dateValueList
                }
            ]
        };

        render();

        // 使用刚指定的配置项和数据显示图表。
        function render() {
            myChart_1.setOption(option_1);
            myChart_2.setOption(option_2);
            myChart_3.setOption(option_3);
            myChart_4.setOption(option_4);
            myChart_5.setOption(option_5);
        }

        function resizeChart() {
            myChart_1.resize();
            myChart_2.resize();
            myChart_3.resize();
            myChart_4.resize();
            myChart_5.resize();
        }

        window.onresize = function () {
            resizeChart();
        }
    }

</script>